import { _decorator, Component, Label } from 'cc';
const { ccclass, inspector, property } = _decorator;
import * as cc from "cc";
import { VMLabel, VMButtonClick, mvvm } from "../../framework/vm/VMDecorator";
import { userData } from '../../game/storage/UserData';
import { VMEntity } from '../../framework/vm/VMEntity';
import { VMCenter } from '../../framework/vm/VMCenter';
import { VMTween } from '../../framework/vm/VMTransitionValue';
import { DemoVMSceneBase } from './DemoVMSceneBase';
@ccclass('DemoVMLabelFormat')
// @mvvm()
export default class DemoVMLabelFormat extends DemoVMSceneBase implements IMVVM{
    _vmTag: string;
    _vmEntitys: VMEntity[];


    @property(Label)
    levelLabel: cc.Label = null;

    // @VMLabel({
    //     watchPath: ['userdata.level', 'userdata.mhp'], templateMode: true, formator(opts) {
    //         return Math.round(opts.newValue);
    //     }
    // })
    @property(Label)
    hpMaxLabel: cc.Label = null;

    // @VMButton({
    //     watchPath: 'userdata.level', min: 0, max: 9999, operation: (param) => {
    //         return param.currentValue - 100;
    //     }
    // })
    @property(cc.Button)
    btnMulLevel: cc.Button = null;


    // @VMButton({
    //     watchPath: 'userdata.level', min: 0, max: 9999, operation: (param) => {
    //         return param.currentValue + 100;
    //     }
    // })
    @property(cc.Button)
    btnAddLevel: cc.Button = null;


    data = {
        hp: 100,
        limitList: ["abcdefg","efghteav",'pvmiasv','vmoaisdn','viuoahsn'],
        limit: "abcdefg",
        limitShow: "abcdefg",
        num:{
            int: 1,
            fix: 1,
            per: 0,
            pad: 1,
            sep: 500,
            mmss: 1,
            hhmmss: 1,
        },
        show:{
            int: 1,
            fix: 1,
            per: 0,
            pad: 1,
            sep: 500,
            mmss: 1,
            hhmmss: 1,
        },
        step: {
            int: 3,
            fix: 1,
            per: 0.005,
            pad: 1,
            sep: 76,
            mmss: 60,
            hhmmss: 88,
        }
    }

    onLoad() {
        
    }
    
    start() {
        super.start();
        this.schedule(() => {
            userData.mhp += 200;
        }, 2, 3)
    }

    
    onEnable(){
        VMCenter.add(userData,"userdata");
        VMCenter.add(this.data,this);

        
        VMCenter.Label(this,this.levelLabel,{watchPath: "userdata.level"});

        VMCenter.Label(this,this.hpMaxLabel,{watchPath:  ['*.hp', 'userdata.mhp']});
     

        VMCenter.ButtonClick(this,this.btnAddLevel,{
                watchPath: '*.hp', min: 0, max: 99999, operation: (param) => {
                    return param.currentValue + 100;
                }
        });

        VMCenter.ButtonClick(this,this.btnMulLevel,{
            watchPath: '*.hp', min: 0, max: 99999, operation: (param) => {
                return param.currentValue - 100;
            }
        });


        let labelLimit = this.getLabel("labelLimit");
        VMCenter.Label(this,labelLimit,{watchPath: [`*.limitShow`,`*.limit`]});

        Object.keys(this.data.num).forEach((key)=>{
            let propertyKey = `label${key.slice(0, 1).toUpperCase() + key.slice(1)}`
            let label = this.getLabel(propertyKey);
            VMCenter.Label(this,label,{watchPath: [`*.num.${key}`,`*.show.${key}`],vmTween: VMTween()});
        });

        this.schedule(()=>{
            Object.keys(this.data.num).forEach((key)=>{
                this.data.num[key] += this.data.step[key];
                this.data.show[key] += this.data.step[key];
            });

            let element = this.data.limitList[Math.floor(Math.random() * this.data.limitList.length)];
            this.data.limit = this.data.limitShow = element;
        },1);
    }

    getLabel(name){
        return cc.find(`Canvas/${name}`).getComponent(cc.Label);
    }

    onDisable(){
        VMCenter.remove(this);
    }



    onEditBoxEnded(event) {
        console.log('DemoVMButton-> ', event.string);

        let num = parseInt(event.string);
        if (isNaN(num)) {
            return;
        }
        userData.level = num;

    }
    // update (dt) {
        
        
    // }
}

